<template>
  <div class="payment-page">
    <div class="card">
      <div class="card-header">
        <span>网上缴费统计</span><br>
      </div>
      <div class="card-body">
        <div style="display: flex; flex-direction: column; align-items: center;">
          <el-table :data="tableData" >
            <el-table-column prop="stu_ID" label="学生Id"></el-table-column>
            <el-table-column prop="result" label="学费缴费情况"></el-table-column>
            <el-table-column prop="result1" label="代收费缴费情况"></el-table-column>
            <el-table-column prop="result2" label="住宿费缴费情况"></el-table-column>
          </el-table>

          <el-pagination
              :page-size="pageSize"
              :current-page="pageNum"
              :total="totalCount"
              layout="total, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange">
          </el-pagination>

        </div>
      </div>
    </div>
  </div>
</template>



<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      totalCount: 0,
      tableData: [],
    }
  },

  mounted() {
    this.GetOnlineFee()
  },
  methods: {
    GetOnlineFee() {
      const GetOnlineFeeRequest = {
        pageNum:this.pageNum,
        pageSize:this.pageSize,
      }
      request.post("/regis/form/online", GetOnlineFeeRequest)
          .then(res => {
            console.log(res.data);
            this.tableData = res.data.data.list;
            this.totalCount = res.data.data.totalCount;
          })
          .catch(error => {
            console.error("Error fetching data:", error);
            Message.error("获取数据失败！");
          });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.pageNum = 1;
      this.GetAdvent();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.GetAdvent();
    },
  }
};
</script>
